<template>
  <div class="image-cropper-example">
    <h2>图片裁剪上传组件示例</h2>

    <!-- 单图片上传示例 -->
    <div class="example-section">
      <h3>单图片上传</h3>
      <el-form :model="singleForm" label-width="120px">
        <el-form-item label="Banner图片">
          <ImageCropperUpload
            :init-url="singleForm.bannerImage"
            :multiple="false"
            :fixed-number="[709, 322]"
            :img-w-h="[709, 322]"
            @imgupload="handleSingleImageUpload"
          />
          <span style="color: red">建议尺寸：（709*322像素）</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 多图片上传示例 -->
    <div class="example-section">
      <h3>多图片上传</h3>
      <el-form :model="multipleForm" label-width="120px">
        <el-form-item label="商品图片">
          <ImageCropperUpload
            :init-url="multipleForm.productImages"
            :multiple="true"
            :fixed-number="[1, 1]"
            :img-w-h="[400, 400]"
            @imgupload="handleMultipleImageUpload"
          />
          <span style="color: red">建议尺寸：（400*400像素）</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 分享图片上传示例 -->
    <div class="example-section">
      <h3>分享图片上传</h3>
      <el-form :model="shareForm" label-width="120px">
        <el-form-item label="海报图">
          <ImageCropperUpload
            :init-url="shareForm.posterImage"
            :multiple="false"
            :fixed-number="[370, 600]"
            :img-w-h="[370, 600]"
            @imgupload="handlePosterImageUpload"
          />
          <span style="color: red">建议尺寸：（370*600像素）</span>
        </el-form-item>

        <el-form-item label="分享卡片图">
          <ImageCropperUpload
            :init-url="shareForm.cardImage"
            :multiple="false"
            :fixed-number="[500, 400]"
            :img-w-h="[500, 400]"
            @imgupload="handleCardImageUpload"
          />
          <span style="color: red">建议尺寸：（500*400像素）</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 显示上传结果 -->
    <div class="result-section">
      <h3>上传结果</h3>
      <el-card>
        <template #header>
          <span>单图片上传结果</span>
        </template>
        <p>
          <strong>Banner图片URL:</strong>
          {{ singleForm.bannerImage || "未上传" }}
        </p>
      </el-card>

      <el-card style="margin-top: 20px">
        <template #header>
          <span>多图片上传结果</span>
        </template>
        <div
          v-if="multipleForm.productImages && multipleForm.productImages.length"
        >
          <div
            v-for="(image, index) in multipleForm.productImages"
            :key="index"
            style="margin-bottom: 10px"
          >
            <img
              :src="image.imgUrl"
              style="
                width: 100px;
                height: 100px;
                object-fit: cover;
                margin-right: 10px;
              "
            />
            <span>图片 {{ index + 1 }}: {{ image.imgUrl }}</span>
          </div>
        </div>
        <p v-else>未上传图片</p>
      </el-card>

      <el-card style="margin-top: 20px">
        <template #header>
          <span>分享图片上传结果</span>
        </template>
        <p>
          <strong>海报图URL:</strong> {{ shareForm.posterImage || "未上传" }}
        </p>
        <p><strong>卡片图URL:</strong> {{ shareForm.cardImage || "未上传" }}</p>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import ImageCropperUpload from "../components/ImageCropperUpload.vue";

// 表单数据
const singleForm = reactive({
  bannerImage: "",
});

const multipleForm = reactive({
  productImages: [],
});

const shareForm = reactive({
  posterImage: "",
  cardImage: "",
});

// 处理单图片上传
const handleSingleImageUpload = (imageUrl) => {
  singleForm.bannerImage = imageUrl;
  ElMessage.success("Banner图片上传成功");
};

// 处理多图片上传
const handleMultipleImageUpload = (imageList) => {
  multipleForm.productImages = imageList;
  ElMessage.success(`成功上传 ${imageList.length} 张图片`);
};

// 处理海报图片上传
const handlePosterImageUpload = (imageUrl) => {
  shareForm.posterImage = imageUrl;
  ElMessage.success("海报图片上传成功");
};

// 处理卡片图片上传
const handleCardImageUpload = (imageUrl) => {
  shareForm.cardImage = imageUrl;
  ElMessage.success("卡片图片上传成功");
};
</script>

<style lang="scss" scoped>
.image-cropper-example {
  padding: 20px;

  .example-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    h3 {
      margin-top: 0;
      margin-bottom: 20px;
      color: #303133;
    }
  }

  .result-section {
    h3 {
      margin-bottom: 20px;
      color: #303133;
    }
  }
}
</style>
